﻿<div ng-controller="teacherpanelCtrl">
    <div class="row">
        <div class="col-md-12">
            <div class="text-right" style="margin-bottom:10px; padding-top:15px">
                <button class="btn btn-success" ng-click="addTeacher()">Add New</button>
            </div>
        </div>
    </div>
    <hr />
    <div class="col-md-12">
        <h3>Teacher's Table</h3>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Joining Date</th>
                    <th>Ecademic Qualification</th>
                    <th>Cell No.</th>
                    <th>Photo</th>
                    <th>...</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="t in model.teachers">
                    <td>{{t.TeacherName}}</td>
                    <td>{{t.Designation}}</td>
                    <td>{{t.JoiningDate|date}}</td>
                    <td>{{t.EcademicQualification}}</td>
                    <td>{{t.CellNo}}</td>
                    <td><img src="{{t.Photo}}" height="50"/></td>
                    <td>
                        <button class="btn btn-warning" ng-click="tEdit(t)"><span class="glyphicon glyphicon-edit"></span></button>
                        <button class="btn btn-danger" ng-click="tDelete(t)"><span class="glyphicon glyphicon-trash"></span></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <!--TeacherAddModal-->
    <div class="modal fade " role="dialog" id="TeacherAddModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="background-repeat:no-repeat; background-position:center ;">
                <div class=" modal-header" style="background-color:#14267a; color:white;">
                    <button class="close" ng-click="cancel()">&times;</button>
                    <h2><img src="../../../images/header_logo.png" width="50" style="margin-bottom:15px"/> Add New Teacher</h2>
                </div>
                <div class="modal-body">
                    <form name="teacherForm" class="form-horizontal" novalidate>

                        <div class="form-group" ng-class="{'has-error':teacherForm.TeacherName.$invalid && !teacherForm.TeacherName.$pristine}">
                            <label class="col-sm-4 control-label"> Name  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="TeacherName" ng-model="current.TeacherName" placeholder="Full Name" required ng-maxlength="50" />
                                <div ng-show="teacherForm.TeacherName.$error.required && !teacherForm.TeacherName.$pristine" class="help-block">Teacher Name is required!</div>
                                <div ng-show="teacherForm.TeacherName.$error.maxlength" class="help-block">Teacher Name too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherForm.Designation.$invalid && !teacherForm.Designation.$pristine}">
                            <label class="col-sm-4 control-label"> Designation  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="Designation" ng-model="current.Designation" placeholder="Designation" required ng-maxlength="50" />
                                <div ng-show="teacherForm.Designation.$error.required && !teacherForm.Designation.$pristine" class="help-block">Designation is required!</div>
                                <div ng-show="teacherForm.Designation.$error.maxlength" class="help-block">Designation too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherForm.JoiningDate.$invalid && !teacherForm.JoiningDate.$pristine}">
                            <label class="col-sm-4 control-label"> Joining Date  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="JoiningDate" ng-model="current.JoiningDate" placeholder="yyyy-mm-dd" required ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" />
                                <div ng-show="teacherForm.JoiningDate.$error.required && !teacherForm.JoiningDate.$pristine" class="help-block">Joining Date is required!</div>
                                <div ng-show="teacherForm.JoiningDate.$error.pattern && !teacherForm.JoiningDate.$pristine" class="help-block">Require pattern "yyyy-mm-dd"...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherForm.EcademicQualification.$invalid && !teacherForm.EcademicQualification.$pristine}">
                            <label class="col-sm-4 control-label"> Academic Qualification  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="EcademicQualification" ng-model="current.EcademicQualification" placeholder="EcademicQualification" required ng-maxlength="50" />
                                <div ng-show="teacherForm.EcademicQualification.$error.required && !teacherForm.EcademicQualification.$pristine" class="help-block">Ecademic Qualification is required!</div>
                                <div ng-show="teacherForm.EcademicQualification.$error.maxlength" class="help-block">Ecademic Qualification too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherForm.CellNo.$invalid && !teacherForm.CellNo.$pristine}">
                            <label class="col-sm-4 control-label"> Cell No.  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="CellNo" ng-model="current.CellNo" placeholder="CellNo" required ng-maxlength="50" />
                               
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">Photo</label>
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-default" ng-click="photoClick()">Select Image</button>
                                <img id="newPhoto" ng-show="current.Photo" width="50" class="img-thumbnail" />
                            </div>
                         </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" form="teacherForm" class="btn btn-success" ng-click="insertTeacher()" ng-disabled="teacherForm.$invalid">Save</button>
                    <button class="btn btn-danger" ng-click="cancel()">Cancel</button>


                </div>

            </div>

        </div>

    </div>
    <!--Edit Modal-->
    <div class="modal fade " role="dialog" id="TeacherEditModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="background-repeat:no-repeat; background-position:center ;">
                <div class=" modal-header" style="background-color:#2e3c0a; color:white;">
                    <button class="close" ng-click="cancel()">&times;</button>
                    <h2><img src="../../../images/header_logo.png" width="50" style="margin-bottom:15px" />Edit Teacher</h2>
                </div>
                <div class="modal-body">
                    <form name="teacherEditForm" class="form-horizontal" novalidate>

                        <div class="form-group" ng-class="{'has-error':teacherEditForm.TeacherName.$invalid && !teacherEditForm.TeacherName.$pristine}">
                            <label class="col-sm-4 control-label"> Name  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="TeacherName" ng-model="current.TeacherName" placeholder="Full Name" required ng-maxlength="50" />
                                <div ng-show="teacherEditForm.TeacherName.$error.required && !teacherEditForm.TeacherName.$pristine" class="help-block">Teacher Name is required!</div>
                                <div ng-show="teacherEditForm.StudentName.$error.maxlength" class="help-block">Teacher Name too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherEditForm.Designation.$invalid && !teacherEditForm.Designation.$pristine}">
                            <label class="col-sm-4 control-label"> Designation  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="Designation" ng-model="current.Designation" placeholder="Designation" required ng-maxlength="50" />
                                <div ng-show="teacherEditForm.Designation.$error.required && !teacherEditForm.Designation.$pristine" class="help-block">Designation is required!</div>
                                <div ng-show="teacherEditForm.Designation.$error.maxlength" class="help-block">Designation too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherEditForm.JoiningDate.$invalid && !teacherEditForm.JoiningDate.$pristine}">
                            <label class="col-sm-4 control-label"> Joining Date  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="JoiningDate" ng-model="current.JoiningDate" placeholder="yyyy-mm-dd" />
                                <div ng-show="teacherEditForm.JoiningDate.$error.required && !teacherEditForm.JoiningDate.$pristine" class="help-block">Joining Date is required!</div>
                                <!--<div ng-show="teacherEditForm.JoiningDate.$error.pattern && !teacherEditForm.JoiningDate.$pristine" class="help-block">Require pattern "yyyy-mm-dd"...</div>-->
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherEditForm.EcademicQualification.$invalid && !teacherEditForm.EcademicQualification.$pristine}">
                            <label class="col-sm-4 control-label"> Academic Qualification  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="EcademicQualification" ng-model="current.EcademicQualification" placeholder="EcademicQualification" required ng-maxlength="50" />
                                <div ng-show="teacherEditForm.EcademicQualification.$error.required && !teacherEditForm.EcademicQualification.$pristine" class="help-block">Ecademic Qualification is required!</div>
                                <div ng-show="teacherEditForm.EcademicQualification.$error.maxlength" class="help-block">Ecademic Qualification too long...</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error':teacherEditForm.CellNo.$invalid && !teacherEditForm.CellNo.$pristine}">
                            <label class="col-sm-4 control-label"> Cell No.  *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="CellNo" ng-model="current.CellNo" placeholder="CellNo" required ng-maxlength="50" />

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Photo</label>
                            <button type="button" class="btn btn-default" ng-click="editPhotoClick()">Change Image</button>
                            <img id="newPhoto" src="{{current.Photo}}" width="50" class="img-thumbnail" />
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" form="teacherEditForm" class="btn btn-success" ng-click="editTeacher()" ng-disabled="teacherEditForm.$invalid">Update</button>
                    <button class="btn btn-danger" ng-click="cancel()">Cancel</button>


                </div>

            </div>

        </div>

    </div>

    <div class="modal fade" role="dialog" id="teacherDeleteModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" ng-click="cancel()">&times;</button>
                    <h3>Are you sure to delete ? </h3>
                    <hr />
                    <div class="text-right">
                        <button class="btn btn-danger" ng-click="ConteacherDelete()"><i class="fa fa-check" aria-hidden="true"></i> &nbsp; Yes</button>
                        <button class="btn btn-default" ng-click="cancel()"><i class="fa fa-times" aria-hidden="true"></i> &nbsp; No</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    
</div>
